<template>
  <button
    @tap="onTap"
    class="c-btn"
    :disabled="props.disabled || props.loading || currentLoading"
    :class="props.class"
    :plain="props.plain"
    :loading="props.loading || currentLoading"
  >
    <slot></slot>
  </button>
</template>
<script setup lang="jsx">
import { useForm } from '@/hooks';
import { Button } from '@tarojs/components';
import { ref } from 'vue';

const props = defineProps({
  onTap: Function,
  disabled: Boolean,
  plain: Boolean,
  round: String,
  class: [String, Object],
  loading: Boolean
});

const { catchError } = useForm();

const currentLoading = ref(false);

const onTap = async e => {
  if (currentLoading.value || props.loading) return;
  const result = props.onTap?.call(this, e);
  if (result instanceof Promise) {
    currentLoading.value = true;
    try {
      await result.error();
    } catch (error) {
      catchError(error);
      throw error;
    } finally {
      currentLoading.value = false;
    }
  }
};
</script>
